<template>
  <el-dialog v-model="props.openModal" title="编辑客户" @close="emit('close')">
    <el-form ref="form" :model="editForm" label-width="100px" inline>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="客户名称">
            <el-input v-model="editForm.name" placeholder="客户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户编码">
            <el-input v-model="editForm.code" placeholder="客户编码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12"></el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="注册手机">
            <el-input
              v-model="editForm.phone"
              placeholder="注册手机"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户电话">
            <el-input v-model="editForm.tel" placeholder="客户电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="传真">
            <el-input v-model="editForm.fax" placeholder="客户电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="省市区">
            <el-cascader
              v-model="editForm.address"
              :options="cityOptions"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="详细地址">
            <el-input
              v-model="editForm.addrDetail"
              placeholder="详细地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户习惯">
            <el-input
              v-model="editForm.habit"
              placeholder="客户习惯"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="代理品牌">
            <el-select
              class="w-44"
              v-model="editForm.agentBrand"
              placeholder="请选择"
            >
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户备注">
            <el-input
              v-model="editForm.remark"
              placeholder="客户备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="接单员">
            <el-select
              class="w-44"
              v-model="editForm.orderTaker"
              placeholder="请选择"
            >
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务员">
            <el-select
              class="w-44"
              v-model="editForm.businessman"
              placeholder="请选择"
            >
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="是否启用">
            <el-switch v-model="editForm.active"> </el-switch>
          </el-form-item>
          <el-form-item label="客户预警">
            <el-switch v-model="editForm.alarm"> </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营业执照">
            <ImageUpload v-model="editForm.businessLicense"></ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('close')">取消</el-button>
        <el-button type="primary" @click="handleAddrEdit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, watch } from "vue";
import { cityOptions } from "../../../../../utils/city";
const props = defineProps({
  openModal: {
    type: Boolean,
    default: false,
  },
  update: Boolean,
  data: Object,
});

const emit = defineEmits(["close"]);
const openEditModal = ref(false);

const logisticsAddresses = ref([{}]);
const editForm = ref({
  name: "",
  code: "",
  phone: "",
  tel: "",
  fax: "",
  address: "",
  addrDetail: "",
  habit: "",
  agentBrand: "",
  remark: "",
  orderTaker: "",
  businessman: "",
  active: "",
  alarm: "",
  businessLicense: "",
});

const activeTab = ref(1);
watch(
  () => props.openModal,
  (val) => {
    if (val) {
      if (props.update) {
        editForm.value = { ...editForm.value, ...props.data };
        editForm.value.address = [
          editForm.value.province,
          editForm.value.city,
          editForm.value.area,
        ];
      } else {
        for (let key in editForm.value) {
          editForm.value[key] = null;
        }
      }
    }
  }
);
function handleEdit(row) {
  openEditModal.value = true;
  editForm.value = {
    ...row,
  };
  editForm.value.address = editForm.value.address.split(",");
}

function handleAddrEdit() {
  if (editForm.value.address)
    editForm.value.address = editForm.value.address.join(",");
  emit("close");
  emit("reload", editForm.value, props.update);
}
</script>